<template>
  <div>
    <div class="userbox" v-if="userInfo!==''">
      <div class="user-info">
        <img class="user-img" :src="userInfo.headimgurl">
        <span class="user-name">{{userInfo.nickname}}</span>
      </div>
      <div class="user-operate clearfix">
        <div class="fl">我的积分：<span class="text-red ft-16">{{userInfo.integral}}</span>
          <van-icon class="text-gray ml-1 ft-20" style="position:relative; top:4px;" name="question-o" @click="operateShow = true" />
        </div>
        <van-button type="primary" :disabled="!SignIn" class="fr" size="small" @click="signInBtn">{{sigTxt}}</van-button>
      </div>
    </div>
    <van-button class="not-login clearfix" style="text-align:left!important;" type="default" size="large" open-type="getUserInfo" lang="zh_CN" @getuserinfo="bindGetUserInfo" v-else>
      <van-icon name="user-circle-o fl" /><text class="login-text fl">授权登录</text>
    </van-button>
    <div class="my-list mt-1">
      <van-cell
        custom-class="my-li"
        title="积分兑换"
        icon="comment-o"
        clickable="true"
        center="true"
        is-link
        @click="jfdh"
      />
      <van-cell
        custom-class="my-li"
        title="我的礼品"
        icon="point-gift-o"
        clickable="true"
        center="true"
        is-link
        @click="myOrder"
      />
      <van-cell
        custom-class="my-li"
        title="收货地址"
        icon="location-o"
        clickable="true"
        center="true"
        is-link
        @click="myAddress"
      />
    </div>
    <van-toast id="van-toast" />
    <div class="my-list mt-1">
      <button class="my-li" @click="handleTapShareButton" open-type="share">
        <van-icon class="r-icon" name="share" />
        分享推荐
        <van-icon class="l-icon" name="arrow" />
      </button>
      <div class="my-li" @click="makePhoneCall('400-666-0895')">
        <van-icon class="r-icon" name="service-o" />
        联系客服
        <van-icon class="l-icon" name="arrow" />
      </div>
      <navigator class="my-li" url="/pages/about/main">
        <van-icon class="r-icon" name="friends-o" />
        关于我们
        <van-icon class="l-icon" name="arrow" />
      </navigator>
    </div>
    <van-popup class="operateBomb" :overlay="true" @close="operateShow = false" :show="operateShow" >
      <div class="operate-txt bgImg">
        <van-icon class="text-gray ml-1 ft-20 closed" name="cross" @click="operateShow = false" />
        <img src="../../../static/images/jf.png" width="100%">
      </div>
    </van-popup>
    <van-dialog id="van-dialog" />
  </div>
</template>
<script>
// import Dialog from '../../../static/vant/dialog/dialog'
import {integral, views} from '../../utils/utils.js'
export default {
  onShareAppMessage (res) {
    if (res.from === 'button') {
      // 增加积分
      this.sharpePage(this.$root.$mp.query.id, 3)
    } else {
      this.sharpePage(this.$root.$mp.query.id, 4)
    }
    return {
      title: '我和你',
      imageUrl: '/images/a.png',
      path: '/pages/my/main'
    }
  },
  onShow: function () {
    wx.getSetting({
      success: (res) => {
        if (res.authSetting['scope.userInfo']) {
          // 刷新积分
          let userDtr = wx.getStorageSync('userDtr')
          wx.request({
            url: this.apiUrl + 'api/user/info?uid_str=' + userDtr,
            header: {
              'content-type': 'application/x-www-form-urlencoded'
            },
            method: 'GET',
            dataType: 'json',
            success: res => {
              if (res.data.code === 200) {
                wx.setStorageSync('integral', res.data.data.integral)
                const returnedTarget = Object.assign({}, this.userInfo)
                returnedTarget.integral = res.data.data.integral
                this.userInfo = Object.assign(this.userInfo, returnedTarget)
              }
            },
            fail: () => {},
            complete: () => {}
          })
        }
      }
    })
  },
  data () {
    return {
      showDialog: false,
      SignIn: true, // 能发签到
      sigTxt: '每日签到',
      operateShow: false,
      isLogin: false,
      userInfo: ''
    }
  },
  components: {},
  methods: {
    // 积分增加， 更新 分享、浏览 、转发数量，增加积分
    // type:share 更新分享数   views  更新浏览数 forwarding 更新转发数
    getIntegral (type = 2) {
      let _this = this
      let id = _this.$root.$mp.query.id
      // 增加积分
      integral(id, type)
      // 增加统计数量  views
      views(id, 'views')
    },
    // 1.签到 2.阅读文章 3.转发文章 4.分享小程序
    sharpePage (id, type = 3) {
      // 增加积分
      integral(id, type)
      // 增加统计数量 share
      views(id, 'share')
    },
    // 拨打电话
    makePhoneCall (inputValue) {
      wx.makePhoneCall({
        phoneNumber: inputValue,
        success () {
        }
      })
    },
    // 分享
    handleTapShareButton () {
      if (!((typeof wx.canIUse === 'function') && wx.canIUse('button.open-type.share'))) {
        wx.showModal({
          title: '当前版本不支持转发按钮',
          content: '请升级至最新版本微信客户端',
          showCancel: false
        })
      }
    },
    // 签到
    signInBtn () {
      let userDtr = wx.getStorageSync('userDtr')
      if (this.SignIn) {
        wx.request({
          url: this.apiUrl + '/api/increase',
          data: {
            'type': 1,
            'uid_str': userDtr
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded'
          },
          method: 'GET',
          dataType: 'json',
          success: res => {
            this.SignIn = false
            if (res.data.code === 200) {
              let allinteral = this.userInfo.integral + res.data.data.increasepoints
              this.userInfo = Object.assign({}, this.userInfo, {integral: allinteral})
              // 签到成功增加积分
              wx.showToast({
                title: '签到成功！',
                icon: 'none',
                duration: 2000
              })
            }
            if (res.data.code === 400) {
              wx.showToast({
                title: res.data.msg,
                icon: 'none',
                duration: 2000
              })
            }
          },
          fail: () => {},
          complete: () => {}
        })
      } else {
        // 已签到 提示
        wx.showToast({
          title: '今天已经签到！',
          icon: 'none',
          duration: 2000
        })
        this.SignIn = false
      }
    },
    // 用户授权
    bindGetUserInfo (event) {
      let _this = this
      wx.getSetting({
        success: (res) => {
          if (res.authSetting['scope.userInfo']) {
            // 已授权
            wx.login({
              success (rts) {
                if (rts.code) {
                  // 2、调用获取用户信息接口
                  wx.getUserInfo({
                    success: function (rcs) {
                      // 发起网络请求
                      wx.request({
                        url: _this.apiUrl + 'api/user/getwinfo',
                        method: 'post',
                        header: {
                          'content-type': 'application/x-www-form-urlencoded'
                        },
                        data: {
                          'encryptedData': rcs.encryptedData,
                          'iv': rcs.iv,
                          'code': rts.code
                        },
                        success (login) {
                          let data = login.data
                          if (data.code === 200) {
                            _this.userInfo = Object.assign({}, data.data)
                            _this.isLogin = true
                            wx.setStorageSync('userDtr', data.data.uid_str)
                          }
                        }
                      })
                    }
                  })
                } else {
                  wx.showToast({
                    title: '登录失败！',
                    icon: 'none',
                    duration: 2000
                  })
                }
              }
            })
          } else {
            wx.showToast({
              title: '获取用户信息失败！',
              icon: 'none',
              duration: 2000
            })
          }
        }
      })
    },
    // 点击积分兑换
    jfdh () {
      wx.getSetting({
        success: (res) => {
          if (res.authSetting['scope.userInfo']) {
            wx.navigateTo({ url: '/pages/gift_list/main' })
          } else {
            wx.showToast({
              title: '请授权登录!',
              icon: 'none',
              duration: 2000
            })
          }
        }
      })
    },
    // 点击我的订单
    myOrder () {
      wx.getSetting({
        success: (res) => {
          if (res.authSetting['scope.userInfo']) {
            wx.navigateTo({ url: '/pages/order_list/main' })
          } else {
            wx.showToast({
              title: '请授权登录!',
              icon: 'none',
              duration: 2000
            })
          }
        }
      })
    },
    // 点击收货地址
    myAddress () {
      wx.getSetting({
        success: (res) => {
          if (res.authSetting['scope.userInfo']) {
            wx.navigateTo({ url: '/pages/address/main' })
          } else {
            wx.showToast({
              title: '请授权登录!',
              icon: 'none',
              duration: 2000
            })
          }
        }
      })
    }
  },
  mounted () {
    let _this = this
    let userDtr = wx.getStorageSync('userDtr')
    // 是否授权
    wx.getSetting({
      success: (res) => {
        if (res.authSetting['scope.userInfo']) {
          // 已授权
          wx.getUserInfo({
            success: function (rest) {
              // 已授权
              wx.login({
                success (rts) {
                  if (rts.code) {
                    // 2、调用获取用户信息接口
                    wx.getUserInfo({
                      success: function (rcs) {
                        // 发起网络请求
                        wx.request({
                          url: _this.apiUrl + 'api/user/getwinfo',
                          method: 'post',
                          header: {
                            'content-type': 'application/x-www-form-urlencoded'
                          },
                          data: {
                            'encryptedData': rcs.encryptedData,
                            'iv': rcs.iv,
                            'code': rts.code
                          },
                          success (login) {
                            let data = login.data
                            if (data.code === 200) {
                              _this.userInfo = Object.assign({}, data.data)
                              _this.isLogin = true
                              wx.setStorage({
                                key: 'integral',
                                data: data.data.integral
                              })
                              wx.setStorage({
                                key: 'userDtr',
                                data: data.data.uid_str
                              })
                            }
                          }
                        })
                      }
                    })
                  } else {
                    wx.showToast({
                      title: '登录失败！',
                      icon: 'none',
                      duration: 2000
                    })
                  }
                }
              })
              // 判断是否签到
              if (userDtr) {
                wx.request({
                  url: _this.apiUrl + 'api/user/issign?uid_str=' + userDtr,
                  success (res) {
                    // 还未签到
                    if (res.data.code === 200) {
                      _this.SignIn = true
                    }
                    // 已经签到
                    if (res.data.code === 400) {
                      _this.SignIn = false
                    }
                  }
                })
              }
            }
          })
        }
      }
    })
  },
  created () {}
}
</script>
<style>
page{
  background-color: #f1f1f1
}
.userbox{
  padding: 20px;
  background-color: #fff;
}
.userbox .user-info .user-img{
  width:50px;
  height: 50px;
  border-radius: 50%;
  vertical-align: middle
}
.userbox .user-info .user-name{
  margin-left: 20px;
  font-size: 18px;
}
.userbox .user-operate{
  margin-top: 10px;
  padding: 0;
  line-height: 30px;
}
/*my list*/
.my-list {
  background-color: #fff;
}
.my-list .my-li:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.my-list .my-li{
  height: 60px;
  line-height: 60px;
  font-size: 17px;
  padding:0 10px 0 16px;
  border-bottom: #f1f1f1 1px solid;
  text-align: left;
  border-radius: 0;
  background-color: #fff;
  zoom:1
}
.my-list .my-li .van-cell__left-icon-wrap {
  vertical-align: middle;
  color: #01a46b;
  font-size: 18px;
}
.my-list .my-li .r-icon{
  vertical-align: middle;
  color: #01a46b;
  font-size: 18px;
}
.my-list .my-li .l-icon{
  vertical-align: middle;
  float: right;
  color: #999
}
/* 积分弹框 */
.operateBomb .van-popup{
  width: 80%;
  line-height: 24px;
  background-color: rgba(255,255,255,0);
  overflow-y:unset;
}
.bgImg {
  position: relative;
}
.bgImg .closed {
  border: 1px solid #fff;
  border-radius: 50%;
  font-size: 20px;
  position:absolute;
  right:50%;
  z-index:9999999;
  color:#fff;
  bottom:-50px;
  margin:0 -15px 0 0;
  padding:10rpx;
  text-align:center;
  display:block;
  float:left;
  width:30px;
  height:30px;
  line-height:36px;
} 
.bgImg img {
  width: 100%;
  height:360px;
}
/*未登录样式*/
.not-login .van-button{
  padding: 10px;
  text-align: left;
  height: auto;
}
.not-login ._van-icon{
   font-size: 60px;
   color: #999
}
.not-login .login-text{
   line-height: 60px;
   margin-left: 10px;
   color: #666
}
</style>
